'use client';

import { useState } from 'react';
import { useRouter } from 'next/navigation';
import { Form, Input, Button, Checkbox, message } from 'antd';
import { UserOutlined, LockOutlined } from '@ant-design/icons';
import styled from 'styled-components';
import { ConfigProvider } from 'antd';
import ParticlesBg from './components/ParticlesBg';

// 登录页样式组件
const LoginContainer = styled.div`
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  position: relative;
  overflow: hidden;
`;

const LoginContent = styled.div`
  display: flex;
  width: 80%;
  max-width: 1200px;
  height: 600px;
  position: relative;
  z-index: 10;

  @media (max-width: 992px) {
    width: 90%;
    flex-direction: column;
    height: auto;
  }
`;

const BrandSection = styled.div`
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 2rem;
  
  @media (max-width: 992px) {
    padding: 1rem;
  }
`;

const LoginSection = styled.div`
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 2rem;
  border-radius: 10px;
  
  @media (max-width: 992px) {
    padding: 1rem;
  }
`;

const LoginForm = styled.div`
  width: 100%;
  max-width: 400px;
  padding: 2rem;
  border-radius: 10px;
  
  .login-form-button {
    width: 100%;
    height: 40px;
    background: var(--primary);
    border-color: var(--primary);
    
    &:hover {
      background: var(--primary-dark);
      border-color: var(--primary-dark);
      box-shadow: 0 0 10px var(--border-glow);
    }
  }
  
  .ant-input-affix-wrapper {
    background: rgba(255, 255, 255, 0.1) !important;
    border-color: rgba(255, 255, 255, 0.2) !important;
    height: 40px !important;
    padding: 0 11px !important;
    
    &:hover, &:focus, &-focused {
      border-color: var(--primary) !important;
      box-shadow: 0 0 5px var(--border-glow) !important;
    }
    
    .ant-input {
      background: transparent !important;
      border: none !important;
      box-shadow: none !important;
      height: 24px !important;
      color: white !important;
      
      &:focus {
        box-shadow: none !important;
      }
    }
    
    .ant-input-prefix {
      margin-right: 8px !important;
    }
  }
  
  .ant-input-password-icon {
    color: rgba(255, 255, 255, 0.6) !important;
    
    &:hover {
      color: var(--primary) !important;
    }
  }
  
  .ant-form-item-label > label {
    color: var(--secondary);
  }
  
  .ant-checkbox-wrapper {
    color: var(--secondary);
  }
  
  .login-form-forgot {
    color: var(--secondary);
    &:hover {
      color: var(--primary);
    }
  }
`;

const SystemTitle = styled.h1`
  font-size: 2rem;
  text-align: center;
  margin-bottom: 2rem;
  color: white;
  text-shadow: 0 0 10px rgba(24, 144, 255, 0.5);
  
  @media (max-width: 768px) {
    font-size: 1.5rem;
  }
`;

const SystemLogo = styled.div`
  margin-bottom: 2rem;
  display: flex;
  justify-content: center;
`;

const CopyrightText = styled.div`
  position: absolute;
  bottom: 20px;
  width: 100%;
  text-align: center;
  color: rgba(255, 255, 255, 0.6);
  font-size: 0.8rem;
`;

interface LoginFormValues {
  username: string;
  password: string;
  remember?: boolean;
}

export default function LoginPage() {
  const router = useRouter();
  const [loading, setLoading] = useState(false);
  
  // 登录处理函数
  const onFinish = async (values: LoginFormValues) => {
    setLoading(true);
    try {
      // 模拟登录API调用
      await new Promise(resolve => setTimeout(resolve, 1500));
      
      // 这里应该调用真实的登录API
      console.log('登录信息:', values);
      
      // 登录成功
      message.success('登录成功，正在跳转...');
      
      // 存储登录状态
      localStorage.setItem('user', JSON.stringify({
        username: values.username,
        isLoggedIn: true
      }));
      
      // 跳转到dashboard页面
      setTimeout(() => {
        router.push('/dashboard');
      }, 1000);
    } catch (error) {
      // 处理登录错误
      message.error('登录失败，请检查用户名和密码');
      console.error('登录出错:', error);
    } finally {
      setLoading(false);
    }
  };

  return (
    <ConfigProvider
      theme={{
        token: {
          colorPrimary: '#1890ff',
          colorText: '#ffffff',
        },
        components: {
          Input: {
            colorTextPlaceholder: 'rgba(255, 255, 255, 0.5)',
            colorBgContainer: 'rgba(255, 255, 255, 0.1)',
            colorBorder: 'rgba(255, 255, 255, 0.2)',
            activeBg: 'rgba(255, 255, 255, 0.1)',
            activeBorderColor: 'var(--primary)',
            hoverBorderColor: 'var(--primary)',
          },
          Button: {
            colorPrimary: '#1890ff',
          },
        },
      }}
    >
      <LoginContainer>
        <ParticlesBg />
        
        <LoginContent>
          {/* 左侧品牌区域 */}
          <BrandSection className="glass-effect tech-border">
            <SystemLogo>
              {/* 使用用户提供的PNG格式Logo */}
              <img 
                src="/images/logo.png" 
                alt="江门市空域链低空智能管理系统"
                width={240}
                height={240}
                style={{ objectFit: 'contain' }}
              />
            </SystemLogo>
            <div style={{ textAlign: 'center', color: 'white' }}>
              <h3 style={{ fontSize: '1.5rem', marginBottom: '1rem' }}>智慧城市空域管控</h3>
              <p>基于低空空域管控功能的智慧城市数据大屏</p>
            </div>
          </BrandSection>
          
          {/* 右侧登录区域 */}
          <LoginSection className="glass-effect tech-border">
            <LoginForm>
              <SystemTitle>江门市空域链低空智能管理系统</SystemTitle>
              
              <Form
                name="login_form"
                initialValues={{ remember: true }}
                onFinish={onFinish}
                layout="vertical"
              >
                <Form.Item
                  name="username"
                  rules={[{ required: true, message: '请输入用户名!' }]}
                >
                  <Input 
                    prefix={<UserOutlined className="site-form-item-icon" style={{ color: 'rgba(255, 255, 255, 0.6)' }} />} 
                    placeholder="用户名" 
                    size="large"
                  />
                </Form.Item>
                
                <Form.Item
                  name="password"
                  rules={[{ required: true, message: '请输入密码!' }]}
                >
                  <Input.Password
                    prefix={<LockOutlined className="site-form-item-icon" style={{ color: 'rgba(255, 255, 255, 0.6)' }} />}
                    placeholder="密码"
                    size="large"
                    iconRender={(visible) => (
                      visible ? 
                        <span style={{ color: 'rgba(255, 255, 255, 0.6)' }}>👁️</span> : 
                        <span style={{ color: 'rgba(255, 255, 255, 0.6)' }}>🔒</span>
                    )}
                  />
                </Form.Item>
                
                <Form.Item>
                  <div style={{ display: 'flex', justifyContent: 'space-between' }}>
                    <Checkbox className="remember-me">记住我</Checkbox>
                    <a className="login-form-forgot" href="#">
                      忘记密码
                    </a>
                  </div>
                </Form.Item>

                <Form.Item>
                  <Button
                    type="primary"
                    htmlType="submit"
                    className="login-form-button"
                    loading={loading}
                  >
                    登录
                  </Button>
                </Form.Item>
              </Form>
            </LoginForm>
          </LoginSection>
        </LoginContent>
        
        <CopyrightText>
          © 2025 江门市空域链低空智能管理系统 版权所有
        </CopyrightText>
      </LoginContainer>
    </ConfigProvider>
  );
} 